<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				学生组织申请详情
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				
				<a-form :form="form">
					<a-form-item label="学生组织" v-if="!isApplyList">
						<a-input v-decorator="['ClubName']" disabled/>
					</a-form-item>
					<a-form-item label="姓名" v-if="isApplyList">
						<a-input v-decorator="['Name']" disabled/>
					</a-form-item>
					<a-form-item label="学号" v-if="isApplyList">
						<a-input v-decorator="['UserNo']" disabled/>
					</a-form-item>
					<a-form-item label="申请时间" v-if="isApplyList">
						<a-input v-decorator="['AddTime']" disabled/>
					</a-form-item>
					<a-form-item label="加入理由">
						<a-input v-decorator="['Reason']" disabled/>
					</a-form-item>
					<a-form-item v-for="item in text.formData" :label="item.Name">
						<a-input disabled v-if="item.FieldType == 1" v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" />
						<a-input disabled v-if="item.FieldType == 2" type="textarea" :auto-size="global.textareaHeight"
							v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" />
						<a-input disabled v-if="item.FieldType == 3" type="number" v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" />
						<a-input disabled v-if="item.FieldType == 4" type="number" :step="0.01" v-decorator="[
								item.ID,
								{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
							]" />
						<!-- {{ JSON.stringify(rules) }} -->
						<a-upload v-if="item.FieldType == 5 || item.FieldType == 6"
							v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
							:accept="item.FieldType == 5 ? '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' : 'image/*'"
							:multiple="true"
							list-type="picture-card" :file-list="fileList[item.ID]" @preview="handlePreview"
							>
							<!-- <div>
								<a-icon type="plus" />
								<div class="ant-upload-text">Upload</div>
							</div> -->
						</a-upload>
						<a-date-picker disabled v-if="item.FieldType == 7" @change="e => dataChange(e, item.ID, 'data')"
							v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]" />
						<a-time-picker disabled v-if="item.FieldType == 8" @change="e => dataChange(e, item.ID, 'time')"
							v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]" />
					<a-radio-group
						name="radioGroup"
						v-if="item.FieldType == 9"
						
						v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
					>
						<a-radio :value="item.Value" checked>{{item.Value}}</a-radio>
					</a-radio-group>
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import {
		
	} from '@/api/follow';
	export default {
		props: {
			text: Object,
			isApplyList:Boolean
		},
		watch: {
			text: function(text) {
				let that = this;
				if (JSON.stringify(text) == '{}') {
					
				} else {
					this.$nextTick(() => {
						this.form.setFieldsValue({
							ClubName: text.ClubName,
							Reason: text.Reason,
							Name:text.Name,
							UserNo:text.UserNo,
							AddTime:text.AddTime
						});
					})
					setTimeout(function() {
						let list = text.formData;
						for (var i = 0; i < list.length; i++) {
							if (list[i].FieldType == 8) {
								that.form.setFieldsValue({
									[list[i].ID]: list[i].Value.indexOf('2020-10-10') > -1 ? list[i]
										.Value : '2020-10-10 ' + list[i].Value
								});
							} else {
								that.form.setFieldsValue({
									[list[i].ID]: list[i].Value
								});
							}
							if (list[i].FieldType == 5 || list[i].FieldType == 6) {
								that.fileList = Object.assign(that.fileList, {
									[list[i].ID]: []
								});
							}
						}
						for (let i in that.fileList) {
							for (let n = 0; n < list.length; n++) {
								if (list[n].ID == i) {
									let arr = list[n].Value.split(',');
									for (let m = 0; m < arr.length; m++) {
										if (arr[m]) {
											that.fileList[i].push({
												uid: m,
												url: that.requestUrl + arr[m].split('|')[1],
												name: arr[m].split('|')[0],
												status: 'done'
											});
										}
									}
								}
							}
						}
						console.log(that.fileList)
					}, 500);

				}

			}
		},
		data() {
			return {
				requestUrl: this.global.requestUrl,
				fileList: [],
				rules: {},
				loading: false,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				})
			};
		},
		methods: {
			moment,
			handlePreview(file) {
				if (file.url) {
					this.previewImage = file.url;
				} else {
					this.previewImage = this.requestUrl + file.response.url;
				}
				window.open(this.previewImage, '_blank')
			},
			closeFunction(data) {
				this.form.resetFields();
				this.$emit('closeFun', data);
			}
			
			
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 50px;
	}

	/deep/.ant-form-item {
		margin: 20px 50px;
		display: flex;
	}

	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker {
		width: 100% !important;
	}

	.ant-upload-list-picture-card-container {
		width: 80px;
		height: 80px;
	}

	.zhouqiBen {
		font-size: 12px;
		padding-left: 60px;

	}

	.red {
		color: red;
	}

	.green {
		color: green;
	}
</style>
